define(['jquery', 'bootstrap', 'backend', 'table', 'form','vue'], function ($, undefined, Backend, Table, Form,Vue) {
    var grade_item_component = Vue.component('grade_item_component',{
        props: ['index','grade'],

        template:'#grade_item',
        data: function () {
            return {
                myGrade: this.grade,
            };
        },
        watch: {
            grade:function(val) {
                this.myGrade = val;
            },
            myGrade:function(val){
                this.$emit("on-grade-change",val,this.index);
            },
        },
        methods:{
            grade:function(val) {
                this.myGrade = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            myGrade:function(val){
                this.$emit("on-grade-change",val,this.index);//③组件内对myResult变更后向外部发送事件通知
            },
        }
    });
    var vue = new Vue({
        el:'#form_div',
        data:{
            topic_grade: [],
            topic_number : 0,
        },
        watch:{
            topic_number:function (val) {
                if(val ==''){
                    return;
                }
                var re = /^[0-9]*[1-9][0-9]*$/ ;
                if(!re.test(val)){
                    return;
                }
                this.topic_number = val;
                this.changeTopicGrade();
            }
        },
        methods: {
            addOptionItem: function () {   //添加选项
                var item = {
                    'component': '',
                    'index' : this.topic_grade.length,
                    'grade' : 0
                };
                item.component = 'grade_item_component';
                this.topic_grade.push(item);
            },
            addOptionItemByGrade: function (index,grade) {   //添加选项
                grade = parseInt(grade);
                var item = {
                    'component': '',
                    'index' : index,
                    'grade' : grade
                };
                item.component = 'grade_item_component';
                this.topic_grade.push(item);
            },
            onGradeChange : function(val,index){
                var array;
                array = vue.topic_grade;
                for(var i=0;i<array.length;i++){
                    var item = array[i];
                    if(item.index == index){
                        item.grade = val;
                    }
                }
                // array[index].content = val;
            }
            ,changeTopicGrade:function () {
                if(this.topic_number > this.topic_grade.length){
                    var num = this.topic_number - this.topic_grade.length;
                    for (var i=0;i<num;i++){
                       this.addOptionItem();
                    }
                }else{
                    var num =this.topic_grade.length - this.topic_number;
                    this.topic_grade.splice(this.topic_grade.length-num,num);
                }
            }
        },
        components: {
            'grade_item_component': grade_item_component
        }
    });
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'standard/index',
                    add_url: 'standard/add',
                    edit_url: 'standard/edit',
                    del_url: 'standard/del',
                    multi_url: 'standard/multi',
                    dragsort_url: '',
                    table: 'standard',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                search:false,
                escape: false,
                pk: 'id',
                // sortName: 'weigh',
                pagination: false,
                commonSearch: true,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'money', title: __('Money'),searchable:false},
                        {field: 'answer_money', title: __('Answer money'),searchable:false},
                        {field: 'topic_number', title: __('Topic number'),searchable:false},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Form.api.bindevent($("form[role=form]"));
        },
        edit: function () {
            Form.api.bindevent($("form[role=form]"));
            var topic_grade = Config.topic_grade;
            $.each(topic_grade,function (i,item) {
                console.info(i);
                vue.addOptionItemByGrade(i,item);
            });
            console.info(vue.topic_grade);
            vue.topic_number = topic_grade.length;
        }
    };
    return Controller;
});